@charset "utf-8";
@import "common/reset";
$font-size: 20px;
@function r($px) {
    @return $px / $font-size * 1rem;
}
html,
body {
    height: 100%;
}
.web{
    section{
        .college{
            width: 100%;
            position: relative;
            font-size: 0;
            img {
                width: 100%;
            }
            .mask {
                position: absolute;
                bottom: r(4px);
                left: 0;
                opacity: 0;
                background: rgba(0,0,0,.5);
                width: 100%;
                height: r(104px);
                transition: all 1s;
                transform: translateY(100%);
                .kv_left{
                    margin-left: r(30px);
                    margin-top: r(23px);
                    h4{
                        font-size: r(26px);
                        color: white;
                    }
                    h5{
                        font-size: r(22px);
                        color: white;
                    }
                }
                .kv_right{
                    margin-top: r(60px);
                    margin-right: r(30px);
                    p{
                        display: inline-block;
                        font-size: r(18px);
                        color: white;
                        margin-right: r(22px);
                    }
                    i{
                        font-size: r(14px);
                        color: white;
                        span{
                            color: white;
                            font-size: r(16px);
                        }
                    }
                }
            }
            &:hover {
                .mask {
                    transform: translateY(0%);
                    opacity: 1;
                }
            }
        }
        .article{
            border-top: 25px solid #f5f5f5;
            padding-bottom: r(10px);
            li{
                width: 95%;
                margin: 0 auto;
                .li_top{
                    margin-top: r(22px);
                    border-bottom: 1px solid #e2e2e2;
                    padding-bottom: r(8px);
                    .yuan{
                        width: r(58px);
                        height: r(58px);
                        border-radius: 50%;
                        background: #898989;
                        margin-right: r(18px);
                    }
                    .li_top_center{
                        h6{
                            font-size: r(22px);
                            color: #c5c5c5;
                        }
                        p{
                            font-size: r(18px);
                            color: #c5c5c5;
                        }
                    }
                    .btn{
                        width: r(220px);
                        height: r(58px);
                        font-size: r(28px);
                        color: white;
                        background: #b20000;
                        font-weight: bold;
                    }
                    .yidong{
                        font-size: r(26px);
                        margin-top: r(14px);
                        h5{
                            color: #323232;
                        }
                    }
                    .time{
                        margin-top: r(14px);
                        span{
                            font-size: r(15px);
                            color: #323232;
                            
                        }
                    }
                }
                img{
                    width: 100%;
                    margin-top: r(17px);
                }
            }
        }
    }
}
